<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script id="时钟">
        var myVar=setInterval(function(){myTimer()},1000);
        function myTimer(){
            var d=new Date();
            var t=d.toLocaleTimeString();
            document.getElementById("demo").innerHTML=t;
        }
    </script>
    <style>
        .sy{
            border: none;
            display: inline-block;
            cursor: pointer;
            transition-duration: 0.4s;
        }
       .sy1:hover{
       ;box-shadow: 0 4px 20px 1px #4c8cb1;
       }
        .tj{
            border: none;
            display: inline-block;
            cursor: pointer;
            transition-duration: 0.4s;
        }
        .tj1:hover{
        ;box-shadow: 0 4px 20px 1px #4c8cb1;
        }
        .wz{
            border: none;
            display: inline-block;
            cursor: pointer;
            transition-duration: 0.4s;
        }
        .wz1:hover{
        ;box-shadow: 0 4px 20px 1px #4c8cb1;
        }
        .dropbtn{
            border: none;
            display: inline-block;
            cursor: pointer;
            transition-duration: 0.4s;
        }
        .dropbtn1:hover{
        ;box-shadow: 0 4px 20px 1px #4c8cb1;
        }
        .dropbtn {
            background-color: rgba(18, 28, 39, 0.8);
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: rgba(18, 28, 39, 0.8);
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.75);
        }

        .dropdown-content a {
            color: white;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        .dropdown-content a:hover {background-color: rgba(63, 98, 137, 0.7)
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .dropdown:hover .dropbtn {
            background-color: rgba(18, 28, 39, 0.8);
        }
        #ym1{
            -webkit-animation: mymove 5s infinite;
        }
        @-webkit-keyframes mymove {
            50% {box-shadow: 10px 20px 30px red;}
        }
        #td1{-webkit-animation: mymove1 5s infinite;}
        @-webkit-keyframes mymove1 {
            50% {box-shadow: 10px 20px 30px blue;}
        }
        .button {
            display: inline-block;
            border: none;
            transition: all 0.5s;
            cursor: pointer;
        }

        .button span {
            cursor: pointer;
            display: inline-block;
            position: relative;
            transition: 0.5s;
        }

        .button span:after {
            content: '»';
            position: absolute;
            opacity: 0;
            top: 0;
            right: -20px;
            transition: 0.5s;
        }

        .button:hover span {
            padding-right: 25px;
        }

        .button:hover span:after {
            opacity: 1;
            right: 0;
        }
        #lg1{
            -webkit-animation: mymove2 4s infinite;
        }
        @-webkit-keyframes mymove2 {
            60% {border-bottom-left-radius: 60px;}
        }
        #kl1{
            -webkit-animation: mymove3 4s infinite;
        }
        @-webkit-keyframes mymove3 {
            60% {border-bottom-left-radius: 60px;}
        }
        #tf1{
            -webkit-animation: mymove4 4s infinite;
        }
        @-webkit-keyframes mymove4 {
            50% {margin-top: 20px;}
        }
        #hy1{
            -webkit-animation: mymove5 4s infinite;
        }
        @-webkit-keyframes mymove5 {
            50% {margin-top: 20px;}
        }
        #bw1{
            -webkit-animation: mymove6 5s infinite;
        }
        @-webkit-keyframes mymove6 {
        50% {
            border-top-color: hotpink;
            border-left-color: blue;
            border-bottom-color: orange;
            border-right-color: green;
        }
        }
        #mc1{
            -webkit-animation: mymove7 5s infinite;
        }
        @-webkit-keyframes mymove7 {
            50% {
                border-top-color: mediumvioletred;
                border-left-color: yellow;
                border-bottom-color: lightskyblue;
                border-right-color: lavenderblush;
            }
        }
        .button1 {
            display: inline-block;
            border: none;
            transition: all 0.5s;
            cursor: pointer;
        }

        .button1 span {
            cursor: pointer;
            display: inline-block;
            position: relative;
            transition: 0.5s;
        }

        .button1 span:after {
            content: '︽';
            position: absolute;
            opacity: 0;
            top: -20px;
            right: 5px;
            transition: 0.5s;
        }

        .button1:hover span {
            padding-top: 25px;
        }

        .button1:hover span:after {
            opacity: 1;
            top: 0;
        }
        #top{
            position: fixed;
            bottom: 20px;
            right: 25px;
        }
        #demo{
            position: fixed;
            bottom: 100px;
            right: 20px;
        }
    </style>
</head>
<body style="margin: 0;padding:0">
  <div id="总框" style="background-color: #172331;height: auto;">
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
          <!-- 轮播（Carousel）指标 -->
          <ol class="carousel-indicators">
              <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
              <li data-target="#myCarousel" data-slide-to="1"></li>
              <li data-target="#myCarousel" data-slide-to="2"></li>
              <li data-target="#myCarousel" data-slide-to="3"></li>
              <li data-target="#myCarousel" data-slide-to="4"></li>
          </ol>
          <!-- 轮播（Carousel）项目 -->
          <div class="carousel-inner">
              <div class="item active">
                  <img src="image/1.jpg" alt="First slide">
              </div>
              <div class="item">
                  <img src="image/2.jpg" alt="Second slide">
              </div>
              <div class="item">
                  <img src="image/3.jpg" alt="Third slide">
              </div>
              <div class="item">
                  <img src="image/4.jpg" alt="Fourth slide">
              </div>
              <div class="item">
                  <img src="image/5.jpg" alt="Fifth slide">
              </div>
          </div>
          <!-- 轮播（Carousel）导航 -->
          <a class="carousel-control left" href="#myCarousel"
             data-slide="prev">&lsaquo;</a>
          <a class="carousel-control right" href="#myCarousel"
             data-slide="next">&rsaquo;</a>
      </div>
      <div id="导航">
          <div id="最上" style="height: 30px;background-color: black">
              <p style="padding-left: 100px;padding-top: 5px;padding-bottom: 5px;color: #ececec;font-size: small;height: 20px;width: 250px;margin-left: 200px">欢迎来到LY电竞交易所</p>
              <p style="padding-left: 100px;padding-top: 5px;padding-bottom: 5px;color: #ececec;font-size: small;height: 20px;width: 200px;margin-top: -25px;margin-left: 800px"><a href="" style="text-decoration: none;color: #ececec">帮助中心</a></p>
              <p style="padding-left: 100px;padding-top: 5px;padding-bottom: 5px;color: #ececec;font-size: small;height: 20px;width: 200px;margin-top: -30px;margin-left: 880px"><a href="" style="text-decoration: none;color: #ececec">我的背包</a></p>
              <p style="padding-left: 100px;padding-top: 5px;padding-bottom: 5px;color: #ececec;font-size: small;height: 20px;width: 200px;margin-top: -30px;margin-left: 960px"><a href="" style="text-decoration: none;color: #ececec">我的钱包</a></p>
              <div id="登录图片" style="width: 40px;height: 40px;margin-top: -30px"><img src="image/sign1.png" style="margin-left: 1140px;"></div>
              <p style="padding-left: 100px;padding-top: 5px;padding-bottom: 5px;color: #ececec;font-size: small;height: 20px;width: 200px;margin-top: -43px;margin-left: 1080px"><a href="UserLogin.html" style="text-decoration: none;color: rgba(85,220,114,0.78)">点此登录</a></p>
          </div>
          <div id="导航下部" style="height: 150px;background-color: rgba(18, 28, 39, 0.8);box-shadow: 0 4px 20px 1px rgba(0, 0, 0, 0.3);">
              <div id="图片文字" style="margin-left: 290px;">
                  <img src="image/jm.png" style="margin-top: 15px">
                  <p style="margin-left: 70px;margin-top: -50px;color: ghostwhite;font-family: 华文新魏">LY电竞虚拟交易中心</p>
              </div>

                  <div id="搜索" style="padding: 100px 100px 10px;margin-top: -140px;margin-left: 800px">
                      <form class="bs-example bs-example-form" role="form">
                          <div class="row">
                              <div class="col-lg-6">
                                  <div class="input-group">
                                      <div class="input-group-btn">
                                          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="background-color: #133354;color: #ececec">
                                              游戏导航
                                              <span class="caret"></span>
                                          </button>
                                          <ul class="dropdown-menu">
                                              <li><a href="#" >DOTA 2</a></li>
                                              <li><a href="#">H1Z1</a></li>
                                              <li><a href="#">PAYDAY2</a></li>
                                              <li><a href="#">CS:GO</a></li>
                                          </ul>
                                      </div>
                                      <input type="text" class="form-control" style="width: 300px;background-color: #133354;color: #ececec">
                                  </div>
                              </div><br>
                          </div>
                      </form>
                  </div>

              <div id="导航分类" style="width: 800px;height: 70px;margin-left: 300px">
                  <p id="首页" class="sy sy1" style="padding-top: 10px;padding-bottom:10px;color: ghostwhite;width: 60px;height: 40px;text-align: center;margin-top: 25px"><a href="main.html" style="text-decoration: none;color: ghostwhite">首页</a></p>
                  <p id="精彩推荐" class="tj tj1" style="padding-top: 10px;padding-bottom:10px;color: ghostwhite;width: 70px;height: 40px;text-align: center;margin-top: -50px;margin-left: 60px"><a href="#" style="text-decoration: none;color: ghostwhite">精彩推荐</a></p>
                  <p id="合作网站" class="wz wz1" style="padding-top: 10px;padding-bottom:10px;color: ghostwhite;width: 70px;height: 40px;text-align: center;margin-top: -50px;margin-left: 10px"><a href="#" style="text-decoration: none;color: ghostwhite">合作网站</a></p>
                  <div class="dropdown">
                      <button class="dropbtn dropbtn1" style="outline: none;">游戏分类</button>
                      <div class="dropdown-content">
                          <a href="#dota商城"><img src="image/dota.png">Dota 2</a>
                          <a href="#h1z1商城"><img src="image/h1z1.png">H1Z1: king of the kill</a>
                          <a href="#cs商城"><img src="image/cs.png">Counter-Strike: Global Offensive</a>
                          <a href="#payday商城"><img src="image/payday.png">PAYDAY 2</a>
                      </div>
                  </div>
                  <p id="demo" style="color: ghostwhite;margin-left: 700px;margin-top: -40px;border: 1px solid white;text-align: center;box-shadow: 0 4px 20px 1px #4c8cb1"></p>

              </div>
          </div>
      </div>

      <div id="下半部" style="margin-top: 30px;height: auto;">
          <div id="dota" style="width: 1000px;height: 450px;margin-left: 300px">
              <div id="dota 2文字" style="width: 1000px;height: 30px;color: #ececec;border-bottom: 1px solid #67c1f5">
                  <p><a id="dota商城" style="text-decoration: none;color: #ececec">DOTA 2商城</a></p>
                  <p style="color: #3a954d;font-size: small;margin-top: -28px;margin-left: 850px;"><a href="#" style="text-decoration: none;color: #3a954d;" >前往DOTA 2道具商城>></a></p>
              </div>
              <div id="dota封面图" style="width: 250px;height: 350px;margin-top: 20px;border: 1px solid #111a24;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.75)">
                  <img src="image/dota封面.png" style="padding: 10px;">
              </div>
              <div id="饰品" style="margin-left: 120px">
              <div id="影魔头部" class="ym" style="width: 250px;height: 350px;margin-top: 20px;border: 1px solid rgba(49,74,104,0.78);background-color:inherit;margin-top: -350px;margin-left: 330px;">
                  <div id="ym1" style="border: 1px solid rgba(49,74,104,0.78);width: 220px;height: 180px;margin-left: 15px;margin-top: 5px;"><img src="image/影魔头部.png" style="padding:10px" ></div>
                  <p style="color: #ececec;text-align: center;padding-top: 20px">铭刻 噬魔之王</p>
                  <p style="color: blue;text-align: center;padding-top: 10px">至宝</p>
                  <p style="color: ghostwhite;text-align: center;padding-top: 10px">价格：¥184.5</p>
                  <button class="button" style="width: 180px;height: 30px;margin-left: 35px;border-radius: 3px;background-color: #3b6e8b;color: ghostwhite;border: 1px;vertical-align:middle"><span>前往购买 </span></button>
              </div>
              <div id="剃刀" class="td" style="width: 250px;height: 350px;margin-top: 20px;border: 1px solid rgba(49,74,104,0.78);background-color:inherit;margin-top: -350px;margin-left: 610px;">
                  <div id="td1" style="border: 1px solid rgba(49,74,104,0.78);width: 220px;height: 180px;margin-left: 15px;margin-top: 5px;"><img src="image/剃刀.png" style="padding:10px" ></div>
                  <p style="color: #ececec;text-align: center;padding-top: 20px">英雄武器 剃刀</p>
                  <p style="color: purple;text-align: center;padding-top: 10px">不朽</p>
                  <p style="color: ghostwhite;text-align: center;padding-top: 10px">价格：¥3.68</p>
                  <button class="button" style="width: 180px;height: 30px;margin-left: 35px;border-radius: 3px;background-color: #3b6e8b;color: ghostwhite;border: 1px;vertical-align:middle"><span>前往购买 </span></button>
              </div>
              </div>
          </div>

          <div id="h1z1" style="width: 1000px;height: 450px;margin-left: 300px">
              <div id="h1z1 文字" style="width: 1000px;height: 30px;color: #ececec;border-bottom: 1px solid #67c1f5">
                  <p><a id="h1z1商城" style="text-decoration: none;color: #ececec">H1Z1商城</a></p>
                  <p style="color: #3a954d;font-size: small;margin-top: -28px;margin-left: 850px;"><a href="#" style="text-decoration: none;color: #3a954d;" >前往H1Z1道具商城>></a></p>
              </div>
              <div id="h1z1封面图" style="width: 250px;height: 350px;margin-top: 20px;border: 1px solid #111a24;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.75)">
                  <img src="image/h1z1封面.jpg" style="padding: 10px;">
              </div>
              <div id="饰品1" style="margin-left: 120px">
                  <div id="流光喷" class="lg" style="width: 250px;height: 350px;margin-top: 20px;border: 1px solid rgba(49,74,104,0.78);background-color:inherit;margin-top: -350px;margin-left: 330px;">
                      <div id="lg1" style="border: 1px solid rgba(49,74,104,0.78);width: 220px;height: 180px;margin-left: 15px;margin-top: 5px;"><img src="image/流光喷.png" style="padding:10px;width: 200px;height:160px" ></div>
                      <p style="color: #ececec;text-align: center;padding-top: 20px">Infernal 12GA Pump Shotgun</p>
                      <p style="color: green;text-align: center;padding-top: 10px">skin</p>
                      <p style="color: ghostwhite;text-align: center;padding-top: 10px">价格：¥700.00</p>
                      <button class="button" style="width: 180px;height: 30px;margin-left: 35px;border-radius: 3px;background-color: #3b6e8b;color: ghostwhite;border: 1px;vertical-align:middle"><span>前往购买 </span></button>
                  </div>
                  <div id="骷髅面巾" class="kl" style="width: 250px;height: 350px;margin-top: 20px;border: 1px solid rgba(49,74,104,0.78);background-color:inherit;margin-top: -350px;margin-left: 610px;">
                      <div id="kl1" style="border: 1px solid rgba(49,74,104,0.78);width: 220px;height: 180px;margin-left: 15px;margin-top: 5px;"><img src="image/骷髅面巾.png" style="padding:10px;width: 200px;height:160px" ></div>
                      <p style="color: #ececec;text-align: center;padding-top: 20px">Skull Face Bandana</p>
                      <p style="color: green;text-align: center;padding-top: 10px">skin</p>
                      <p style="color: ghostwhite;text-align: center;padding-top: 10px">价格：¥9302.91</p>
                      <button class="button" style="width: 180px;height: 30px;margin-left: 35px;border-radius: 3px;background-color: #3b6e8b;color: ghostwhite;border: 1px;vertical-align:middle"><span>前往购买 </span></button>
                  </div>
              </div>
          </div>

          <div id="cs:go" style="width: 1000px;height: 450px;margin-left: 300px">
              <div id="cs:go 文字" style="width: 1000px;height: 30px;color: #ececec;border-bottom: 1px solid #67c1f5">
                  <p><a id="cs商城" style="text-decoration: none;color: #ececec">CS:GO商城</a></p>
                  <p style="color: #3a954d;font-size: small;margin-top: -28px;margin-left: 850px;"><a href="#" style="text-decoration: none;color: #3a954d;" >前往CS:GO道具商城>></a></p>
              </div>
              <div id="cs:go封面图" style="width: 250px;height: 350px;margin-top: 20px;border: 1px solid #111a24;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.75)">
                  <img src="image/csgo封面.png" style="padding: 10px;">
              </div>
              <div id="饰品2" style="margin-left: 120px">
                  <div id="P2000海洋" class="hy" style="width: 250px;height: 350px;margin-top: 20px;border: 1px solid rgba(49,74,104,0.78);background-color:inherit;margin-top: -350px;margin-left: 330px;">
                      <div id="hy1" style="border: 1px solid rgba(49,74,104,0.78);width: 220px;height: 180px;margin-left: 15px;margin-top: 5px;"><img src="image/P2000海洋.png" style="padding:10px;width: 200px;height:160px" ></div>
                      <p style="color: #ececec;text-align: center;padding-top: 20px">P2000 | 海洋</p>
                      <p style="color: blue;text-align: center;padding-top: 10px">军规级</p>
                      <p style="color: ghostwhite;text-align: center;padding-top: 10px">价格：¥99999.00</p>
                      <button class="button" style="width: 180px;height: 30px;margin-left: 35px;border-radius: 3px;background-color: #3b6e8b;color: ghostwhite;border: 1px;vertical-align:middle"><span>前往购买 </span></button>
                  </div>
                  <div id="折叠刀屠夫" class="tf" style="width: 250px;height: 350px;margin-top: 20px;border: 1px solid rgba(49,74,104,0.78);background-color:inherit;margin-top: -350px;margin-left: 610px;">
                      <div id="tf1" style="border: 1px solid rgba(49,74,104,0.78);width: 220px;height: 180px;margin-left: 15px;margin-top: 5px;"><img src="image/折叠刀.png" style="padding:10px;width: 200px;height:160px" ></div>
                      <p style="color: #ececec;text-align: center;padding-top: 20px">折叠刀（★） | 屠夫</p>
                      <p style="color: pink;text-align: center;padding-top: 10px">隐秘</p>
                      <p style="color: ghostwhite;text-align: center;padding-top: 10px">价格：¥727.88</p>
                      <button class="button" style="width: 180px;height: 30px;margin-left: 35px;border-radius: 3px;background-color: #3b6e8b;color: ghostwhite;border: 1px;vertical-align:middle"><span>前往购买 </span></button>
                  </div>
              </div>
          </div>

          <div id="payday" style="width: 1000px;height: 450px;margin-left: 300px">
              <div id="payday 文字" style="width: 1000px;height: 30px;color: #ececec;border-bottom: 1px solid #67c1f5">
                  <p><a id="payday商城" style="text-decoration: none;color: #ececec">PAYDAY 2商城</a></p>
                  <p style="color: #3a954d;font-size: small;margin-top: -28px;margin-left: 830px;"><a href="#" style="text-decoration: none;color: #3a954d;" >前往PAYDAY 2道具商城>></a></p>
              </div>
              <div id="payday封面图" style="width: 250px;height: 350px;margin-top: 20px;border: 1px solid #111a24;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.75)">
                  <img src="image/payday封面.png" style="padding: 10px;">
              </div>
              <div id="饰品3" style="margin-left: 120px">
                  <div id="battle-worn" class="bw" style="width: 250px;height: 350px;margin-top: 20px;border: 1px solid rgba(49,74,104,0.78);background-color:inherit;margin-top: -350px;margin-left: 330px;">
                      <div id="bw1" style="border: 1px solid rgba(49,74,104,0.78);width: 220px;height: 180px;margin-left: 15px;margin-top: 5px;"><img src="image/battle-worn.png" style="padding:10px;width: 200px;height:160px" ></div>
                      <p style="color: #ececec;text-align: center;padding-top: 20px">Spraying Roses, Battle-Worn</p>
                      <p style="color: purple;text-align: center;padding-top: 10px">Rare</p>
                      <p style="color: ghostwhite;text-align: center;padding-top: 10px">价格：¥169.00</p>
                      <button class="button" style="width: 180px;height: 30px;margin-left: 35px;border-radius: 3px;background-color: #3b6e8b;color: ghostwhite;border: 1px;vertical-align:middle"><span>前往购买 </span></button>
                  </div>
                  <div id="mint-condition" class="mc" style="width: 250px;height: 350px;margin-top: 20px;border: 1px solid rgba(49,74,104,0.78);background-color:inherit;margin-top: -350px;margin-left: 610px;">
                      <div id="mc1" style="border: 1px solid rgba(49,74,104,0.78);width: 220px;height: 180px;margin-left: 15px;margin-top: 5px;"><img src="image/mint-condition.png." style="padding:10px;width: 200px;height:160px" ></div>
                      <p style="color: #ececec;text-align: center;padding-top: 20px">Dinomageddon, Mint-Condition</p>
                      <p style="color: purple;text-align: center;padding-top: 10px">Rare</p>
                      <p style="color: ghostwhite;text-align: center;padding-top: 10px">价格：¥100.00</p>
                      <button class="button" style="width: 180px;height: 30px;margin-left: 35px;border-radius: 3px;background-color: #3b6e8b;color: ghostwhite;border: 1px;vertical-align:middle"><span>前往购买 </span></button>
                  </div>
              </div>
          </div>
          <div id="top" style="width: 50px;height: 70px;margin-left: 1460px;margin-bottom: 10px;"><a href="#"><button id="直达顶部" class="button1" style="width: 40px;height: 60px;background-color: rgba(59,110,139,0.38);border: 1px;text-align: center;color: ghostwhite;outline: none;"><span>Top</span></button></a></div>
      </div>
      <div id="底部" style="height: 20px;background-color: rgba(0,0,0,0.4);text-align: center;color: ghostwhite">版权 © LY电竞交易所</div>
  </div>
</body>
</html>